<template>
  <div class="index-container">
    <el-page-header class="detailheader" :icon="ArrowLeft" @back="goBack">
      <template #content>
        <div class="cont">
          <div>管理 / 代课明细</div>
          <el-button circle :icon="Search" @click="toggleSearch" />
        </div>
      </template>
    </el-page-header>
    <el-row class="page-list" style="overflow: auto">
      <el-col
        :lg="{ span: 18, offset: 3 }"
        :sm="{ span: 20, offset: 2 }"
        :xs="{ span: 22, offset: 1 }"
      >
        <el-form
          v-if="showSearch"
          label-width="70px"
          :model="queryForm"
          @submit.prevent
        >
          <el-form-item label="申报日期" :prop="createtime">
            <el-date-picker
              v-model="queryForm.createtimeFrom"
              clearable
              style="width: 120px"
              type="date"
              value-format="YYYY-MM-DD"
            />
            <span style="margin: 0 5px">至</span>
            <el-date-picker
              v-model="queryForm.createtimeTo"
              clearable
              style="width: 120px"
              type="date"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="上课日期" :prop="eventdate">
            <el-date-picker
              v-model="queryForm.eventdateFrom"
              clearable
              style="width: 120px"
              type="date"
              value-format="YYYY-MM-DD"
            />
            <span style="margin: 0 5px">至</span>
            <el-date-picker
              v-model="queryForm.eventdateTo"
              clearable
              style="width: 120px"
              type="date"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="上课节次" :prop="coursetime">
            <el-select v-model="queryForm.coursetime" clearable>
              <el-option
                v-for="item in coursetimeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="年级" :prop="grade">
            <el-tree-select
              v-model="queryForm.grade"
              check-strictly="true"
              clearable
              :data="gradeOptions"
            />
          </el-form-item>
          <el-form-item label="班级" :prop="clasz">
            <el-select v-model="queryForm.clasz" clearable>
              <el-option
                v-for="item in claszOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="学科" :prop="subject">
            <el-select v-model="queryForm.subject" clearable>
              <el-option
                v-for="item in subjectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-button plain type="primary" @click="() => fetchData(true)">
            查询
          </el-button>
        </el-form>
        <el-table
          v-loading="listLoading"
          :data="list"
          show-summary
          :summary-method="getSummaries"
        >
          <el-table-column label="请假老师" prop="srcUserid">
            <template #default="{ row }">
              <ww-open-data :openid="row.srcUserid" type="userName" />
            </template>
          </el-table-column>
          <el-table-column label="代课老师" prop="tarUserid">
            <template #default="{ row }">
              <ww-open-data :openid="row.tarUserid" type="userName" />
            </template>
          </el-table-column>
          <el-table-column label="学科" prop="subject">
            <template #default="{ row }">
              {{ getOptLabel(subjectOptions, row.subject) }}
            </template>
          </el-table-column>
          <el-table-column label="上课日期" prop="eventdate" />
          <el-table-column label="年级" prop="grade">
            <template #default="{ row }">
              {{ getOptLabel(gradeOptions, row.grade) }}
            </template>
          </el-table-column>
          <el-table-column label="班级" prop="clasz">
            <template #default="{ row }">
              {{ getOptLabel(claszOptions, row.clasz) }}
            </template>
          </el-table-column>
          <el-table-column label="节次" prop="coursetime">
            <template #default="{ row }">
              {{ getOptLabel(coursetimeOptions, row.coursetime) }}
            </template>
          </el-table-column>
          <el-table-column label="课时" prop="hours" />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    gradeOptions,
    claszOptions,
    coursetimeOptions,
    subjectOptions,
  } from '@/config'
  import router from '@/router'
  import { useUserStore } from '@/store/modules/user'
  import { getCourses } from '@/api/dksb'
  import { formatTime } from '@/utils'
  import { ArrowLeft, Search } from '@element-plus/icons-vue'
  import longPress from '@/utils/longpress'
  export default defineComponent({
    name: 'History',
    directives: { longPress },
    setup() {
      // const { proxy } = getCurrentInstance()
      const route = useRoute()
      // const router = useRouter()
      const userStore = useUserStore()
      // const { corpId, userId } = storeToRefs(userStore)
      const { corpId, userId } = userStore
      console.log(userId)

      const state = reactive({
        showSearch: false,
        list: [],
        total: 0,
        listLoading: true,
        selectRows: '',
        queryForm: {
          corpId: corpId,
          reqUserid: null,
          blurry: null,
          status: 2,
          createtimeFrom: null,
          createtimeTo: null,
          srcUserid: null,
          tarUserid: null,
          eventdateFrom: null,
          eventdateTo: null,
          grade: null,
          clasz: null,
          subject: null,
          coursetime: null,
          offset: 0,
          pageSize: 0, //0表示没有分页，输出所有数据
        },
      })

      const setSelectRows = (val) => {
        state.selectRows = val
      }

      const fetchData = async (refresh = false) => {
        if (refresh) {
          state.total = 0
          state.queryForm.offset = 0
        } else {
          if (state.total > 0) return
          state.queryForm.offset = state.list.length
        }
        state.listLoading = true
        const { data: list } = await getCourses(state.queryForm)
        if (refresh) {
          state.list = list
        } else {
          if (list.length < state.queryForm.pageSize) {
            state.total = state.list.length + list.length
          }
          state.list.push(...list)
        }
        state.listLoading = false
        state.showSearch = false
      }

      const getCourseDesc = (course) => {
        const { eventdate, grade, clasz, coursetime, subject } = course
        return `${getOptLabel(
          subjectOptions,
          subject
        )} / ${eventdate} / ${getOptLabel(
          coursetimeOptions,
          coursetime
        )} / ${getOptLabel(gradeOptions, grade)} / ${getOptLabel(
          claszOptions,
          clasz
        )} `
      }

      const getOptLabel = (options, value) => {
        let label = ''
        options.some((op) => {
          if (op.value === value) {
            label = op.label
            return true
          }
          if (op.children) {
            label = getOptLabel(op.children, value)
            if (label) return true
          }
        })
        return label
      }

      const canView = (item, course) => {
        return (
          (item.reqUserid === userId &&
            (route.params.id === '0' || route.params.id === '1')) ||
          course.srcUserid === userId ||
          course.tarUserid === userId
        )
      }

      const showDetail = (item) => {
        console.log(item)
        router.push({ path: `/detail/${item.thirdNo}` }).then(() => {})
      }

      const longPress = (data) => {
        console.log('longPress detect。。。。', data)
      }

      const goBack = () => {
        router.go(-1)
      }

      const toggleSearch = () => {
        state.showSearch = !state.showSearch
      }

      const getSummaries = (param) => {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          const values = data.map((item) => item[column.property])
          if (values.some((value) => typeof value == 'number')) {
            sums[index] = values.reduce((prev, curr) => {
              if (typeof curr == 'number') {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          } else {
            sums[index] = ''
          }
        })

        return sums
      }

      onMounted(() => {
        fetchData(true)
      })

      return {
        ...toRefs(state),
        getOptLabel,
        gradeOptions,
        claszOptions,
        coursetimeOptions,
        subjectOptions,
        fetchData,
        setSelectRows,
        getCourseDesc,
        longPress,
        formatTime,
        canView,
        showDetail,
        ArrowLeft,
        Search,
        goBack,
        toggleSearch,
        getSummaries,
      }
    },
  })
</script>
<style lang="scss">
  html {
    height: 100%;
    body {
      margin: 0;
      height: 100%;
      #app {
        margin: 0;
        height: 100%;
      }
    }
  }
</style>

<style lang="scss" scoped>
  .index-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    .detailheader {
      height: 58px;
      line-height: 58px;
      border-bottom: 1px var(--el-border-color) var(--el-border-style);
      padding: 0 10px;
      > :last-child {
        flex-grow: 1;
      }
      .el-page-header__content {
        flex-grow: 1;
        .cont {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
    .page-list {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      margin-top: 20px;
    }
  }
</style>
